<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<div>
<p>关于跨域登录问题</p>
<a href="https://segmentfault.com/a/1190000008963017">Laravel 5.4 api 允许跨域访问</a>
<br>
<a href="http://blog.csdn.net/wzl002/article/details/51441704">跨域Ajax请求时是否带Cookie的设置</a>
<br>

<p>local.crosapi.com 1.local.crosapi.com host到自己的服务器上，并开启服务</p>
<p>请求页面地址 http://1.local.crosapi.com/</p>
<p>api接口地址 http://local.crosapi.com/</p>
<ul>
<li>基于token的普通json
	<ul>
	<li>服务器支持跨域请求 header('Access-Control-Allow-Origin: *'); 或者指定域名，一般是子域名</li>
	<li>登录后服务器给返回的数据包括token信息</li>
	<li>下次请求的时候带上这个token信息</li>
	<li>服务器根据token来判断登录状态</li>
	<li>缺点，前端不同页面需要记录这个token值</li>
	</ul>
</li>
<li>基于session cookie的jsonp
	<ul>
	<!-- <li>服务器支持跨域请求 header('Access-Control-Allow-Origin: *'); 或者指定域名，一般是子域名</li> -->
	<li>服务器支持get请求，并且返回根据callback参数来返回json数据</li>
	<li>ajax请求时候dataType=jsonp</li>
	<li>缺点，所有的请求都是get形式，对于大数据可能超过显示</li>
	</ul>
</li>
<li>基于session cookie的 cros_json
	<ul>
	<li>服务器支持跨域请求 </li>
	<li>$ref = isset($_SERVER['HTTP_REFERER'])?trim($_SERVER['HTTP_REFERER'],"/"):"*";</li>
	<li>header('Access-Control-Allow-Origin:'.$ref); //不要最后的反斜杠</li>
	<li>header("Access-Control-Allow-Credentials: true");</li>
<!-- 	<li>header('Access-Control-Allow-Methods: GET, POST');</li>
	<li>header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');</li>-->
	<li>ajax请求时候crossDomain: true , xhrFields: { withCredentials: true },</li> 
	<li>缺点，前后端配置比较麻烦，线上一般不建议这个使用，需要在编译的时候把跨域参数去掉</li>
	</ul>
</li>
</ul>
<div>
<br>
token:<input type="text" name="token" value="" id="token">
<br>
<input type='radio' value="GET" name="ajax_method" checked="checked">GET
<input type='radio' value="POST" name="ajax_method">POST
<br>
<input type='radio' value="json" name="ajax_type" checked="checked">json
<input type='radio' value="json_token" name="ajax_type">json token
<input type='radio' value="jsonp" name="ajax_type">jsonp
<input type='radio' value="cros_json" name="ajax_type">cros_json
<br>
<input type="button" value="login" id="login" />
<br>
<input type="button" value="logout" id="logout" />
<br>
<input type="button" value="info" id="info" />
<br>
<input type="button" value="api" id="api" />
<br>

<div id="msg"></div>


<script>

var cros_opt={
	crossDomain: true,
	xhrFields: {
		withCredentials: true
    },
    dataType: 'json'
};
function init_ext_opt(){
	var ext_opton={};
	var ajax_type = $('input[name=ajax_type]:checked').val();
	switch(ajax_type){
		case 'json':case 'json_token':ext_opton={dataType: 'json'};break;
		case 'jsonp':ext_opton={dataType: 'jsonp'};break;
		case 'cros_json':
			ext_opton={
				crossDomain: true,
				xhrFields: {
					withCredentials: true
			    },
			    dataType: 'json'
			};
		break;
		default:break;
	}
	return $.extend(ext_opton,{
		type : $('input[name=ajax_method]:checked').val(),
		data: {
		    time: new Date().getTime(),
		    token: ajax_type =='json_token'?$('#token').val():'',
		},
		success : function (d) {
			if(d.token){$('#token').val(d.token)}
			msg("[success]:" + JSON.stringify(d));
		},
		error : function (err) {
			msg("[error]:" + JSON.stringify(err));
		}
	});
}

$("input[type=button]").on('click',function(e){
	var ext_opton = init_ext_opt();
	$.ajax($.extend({
		// contentType: "application/x-www-form-urlencoded",
		url: 'http://local.crosapi.com/api.php?action='+$(this).val()
	},ext_opton));
});

function msg(text){
	$("#msg").text(text);
}



</script>
